<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="widget">
			<button>分布节点碉堡啦！</button>
		</div>

		<template class="widget-template">
			<style>
				::content>button {
					font-size: 18px;
					color: white;
					background: tomato;
					border-radius: 10px;
					border: none;
					padding: 10px;
				}
			</style>
			<content select=""></content>
		</template>

		<script>
			var host = document.querySelector('.widget');
			var root = host.createShadowRoot();
			var template = document.querySelector('.widget-template');
			root.appendChild(document.importNode(template.content, true));
		</script>
	</body>

</html>